<!--添加商品-->
<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">商品管理 </span>
    <el-button type="primary" style="float:right;margin-top: 10px;"
               @click="beforeAddPro">新建商品</el-button>
  </div>
  <el-dialog
    :title="AddTitle"
    style="width: 800px" padding="40px"
    v-model="AddVisible"
    :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input placehold="请输入商品名称：" style="width: 300px" v-model="saveAddForm.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品价格">
            <el-input placehold="请输入商品价格：" style="width: 300px" v-model="saveAddForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品销量">
            <el-input placehold="请输入商品销量：" style="width: 300px" v-model="saveAddForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品旧价格">
            <el-input placehold="请输入商品旧价格：" style="width: 300px" v-model="saveAddForm.oldPrice"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="添加照片">
          <el-upload
              v-model:file-list="fileList"
              v-model:action="actionUrl"
              name="file"
              limit="10"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl"/>
          </el-dialog>
        </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" >取消</el-button>
      <el-button style="background-color: #ADD8E6" @click="savePro" >保存</el-button>
    </template>
  </el-dialog>

</template>
<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
//定义数组保存用户搜索条件呢
const proArr=ref([]);
//弹窗是否出现
const AddVisible=ref(false);
//收集数据
const saveAddForm=ref({
  title:'',
  price:'',
  oldPrice:'',
  url:''
})
const AddTitle=ref('新增商品');
//新增员工方法
const beforeAddPro=()=>{
  AddTitle.value='新增商品';
  AddVisible.value=true;
}
//重新加载数据的方法
const loadPro=()=>{
  console.log(saveAddForm.value);
  let data=qs.stringify(saveAddForm.value);
  axios.post(BASE_URL+'/v1/product/list',data).then((response)=>{
    if (response.data.code==2000){
      proArr.value=response.data.data;
      console.log(proArr.value);
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//保存商品
const savePro=()=>{
  console.log(saveAddForm.value);
  let data=qs.stringify(saveAddForm.value);
  axios.post(BASE_URL+'/v1/product/save',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('保存成功');
      AddVisible.value=false;
      //新增成功重新加载数据
      loadPro();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const handleClose=()=>{
  if (confirm('您确认要关闭本弹幕吗？')){
    saveAddForm.value={};
    AddVisible.value=false;
  }
}
/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/v1/file/upload');
//处理图片删除功能
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/
</script>

<style scoped>

</style>